.page-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx; /* 增加底部padding，确保内容不被tab栏遮挡 */
}

.switch-location {
    padding: 20rpx 30rpx;
    background-color: white;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    //底部圆角
    border-radius: 0 0 20rpx 20rpx;
}

.switch-location text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.search-bar {
    padding: 20rpx;
    background-color: #f5f5f5;
}

.search-input {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 38rpx;
    border: 2rpx solid #D0D4D7;
    padding: 15rpx 20rpx;
}

.search-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
}


.placeholder-style {
    color: #999;
    font-size: 28rpx;
}

/* 标签栏滚动容器 */
.tab-scroll {
    width: 100%;
    overflow-x: auto;
    margin-top: -30rpx;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    &::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
}

/* 标签栏 */
.tab-bar {
    display: flex;
    padding: 15rpx 0;
    min-width: 100%;
}

/* 标签项 - 修改为flex垂直布局 */
.tab-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180rpx;
    padding: 15rpx 0;
    background-color: white;
    margin-right: 16rpx;
    border-radius: 20rpx;

    /* 标签图标 */
    .tab-icon {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 10rpx;
    }
}



/* 激活状态样式 */
.tab-item.active {
    background: #E9FEDD;
    box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(124, 124, 124, 0.24);
    border-radius: 20rpx;
    border: 3px solid #FFFFFF;
}

// .tab-item.active .tab-icon {
// 	filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(414%) hue-rotate(82deg) brightness(106%) contrast(91%);
// }

.filter-bar {
    display: flex;
    justify-content: space-around;
    padding: 15rpx 0;
    background: linear-gradient(0deg, #F2F3F8 0%, #FFFFFF 56.00000000000001%);
    border-radius: 35rpx 35rpx 0rpx 0rpx;
    height: 130rpx;
}

.filter-column {
    width: 120rpx;
    height: 50rpx;
    padding-left: 20rpx;
    border-left: 7rpx solid #BEFF32;

    font-weight: 600;
}

.filter-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 25rpx;
    color: #333;
    margin-left: 10rpx;
    padding: 6rpx 16rpx;
    background: #EEF2F3;
    border-radius: 26rpx;
    height: 30rpx;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: -45rpx;
    width: 140rpx;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10rpx;
    z-index: 999;

}

.dropdown-menu view {
    padding: 12rpx 16rpx;
    text-align: center;
    font-size: 25rpx;
    font-weight: 400;
    transition: background-color 0.2s ease;
}

.dropdown-menu view.active {
    color: #0E1C37;
    background-color: #BEFF32;
}


.filter-icon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 5rpx;
}

.arrow-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 5rpx;
}

.job-list {
    padding: 20rpx;
    margin-top: -50rpx;
}

.job-item {

    background-color: white;
    border-radius: 15rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.job-info {
    display: flex;
}

.job-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 20rpx;
}

.job-details {
    flex: 1;
}

.job-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
}

.job-title text:first-child {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.salary {
    color: #ff3b30;
    font-size: 32rpx;
    font-weight: bold;
}

.job-requirements {
    /* 添加flex布局和间距 */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10rpx;
    margin-bottom: 15rpx;
}

.job-requirements text {
    /* 添加背景色和内边距以增强视觉效果 */
    background-color: #EEF2F3;
    padding: 8rpx 10rpx;
    padding-left: 0;
    border-radius: 20rpx;
    font-weight: 400;
    font-size: 22rpx;
    color: #888B9A;
}

.job-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #999;
}

.location-container {
    display: flex;
    justify-content: space-between;
}

.location {
    font-size: 22rpx;
    color: #888B9A;
}

.distance {
    font-size: 22rpx;
    color: #888B9A;
}

// .location-icon {
// 	width: 24rpx;
// 	height: 24rpx;
// 	margin-right: 5rpx;
// }


.apply-btn {
    background-color: #BEFF32;
    /* 调整为效果图中的绿色 */


    color: #0E1C37;
    border: none;
    border-radius: 12rpx;
    /* 增大圆角使按钮更圆润 */
    padding: 5rpx 0;
    width: 200rpx;
    font-size: 26rpx;
    font-weight: 400;
    /* 添加阴影效果 */
    margin-top: 2rpx;
}

.apply-btn.applied {
    background-color: #FFFFFF;
    color: #A3A6B7;
    border-radius: 12rpx;
    border: 1px solid #A3A6B7;
}

.no-more {
    text-align: center;
    font-size: 26rpx;
    color: #A3A6B7;
}


.no-order-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400rpx;
    /* 确保有足够高度居中显示 */
    padding: 20rpx;
}

.empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
    opacity: 0.5;
    /* 灰色半透明效果 */
}

.no-order-text {
    color: #999999;
    /* 灰色文字 */
    font-size: 28rpx;
}


/* 报名成功弹框样式 */
.apply-success-modal {
    position: fixed;
    bottom: 90rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 398rpx;
    height: 86rpx;
    background: #404040;
    box-shadow: 0rpx 9rpx 13rpx 0rpx rgba(64, 64, 64, 0.27);
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.apply-success-modal text {
    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
}